<template>
  <div class="pages storesalesBill">
    <div class="pageLevel" v-if="!sub">
      <!-- 搜索框 -->
      <div class="tableSearch">
        <el-form label-width="100px" class="demo-ruleForm">
          <el-row>
            <el-col :span="9">
              <el-form-item label="日期:" style="margin-left:-30px" class="billdata">
                <el-date-picker size="small" value-format="yyyy-MM-dd" unlink-panels v-model="selectdata.createTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" clearable :picker-options="pickerOptions"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="类型:">
                <el-select v-model="selectdata.orderType" size="small" style="width:200px;" placeholder="请选择">
                  <el-option label="全部类型" value="0"></el-option>
                  <el-option label="商品售卖" value="1"></el-option>
                  <el-option v-if="shopType" label="计次卡售卖" value="2"></el-option>
                  <el-option v-if="shopType" label="服务订单" value="3"></el-option>
                  <el-option label="退货订单" value="4"></el-option>
                  <el-option label="积分兑换" value="5"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="来源:">
                <el-select v-model="selectdata.source" size="small" style="width:200px;" placeholder="请选择">
                  <el-option label="全部来源" value></el-option>
                  <el-option label="收银一体机" value="1"></el-option>
                  <el-option v-if="isShop=='1'" label="婴联邦APP" value="0"></el-option>
                  <el-option v-if="isShop=='1'" label="圣旦i宝贝" value="2"></el-option>
                  <el-option label="会员小程序" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="7">
              <el-form-item label="支付方式:">
                <el-select v-model="selectdata.payType" size="small" style="width:200px;" placeholder="请选择">
                  <el-option label="全部" value></el-option>
                  <el-option label="现金" value="3"></el-option>
                  <el-option label="微信" value="0"></el-option>
                  <el-option label="支付宝" value="1"></el-option>
                  <el-option label="银行卡" value="2"></el-option>
                  <el-option label="会员余额" value="4"></el-option>
                  <el-option label="计次卡" value="5"></el-option>
                  <el-option label="积分抵现" value="7"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="选择机构" v-if="isShop=='1'">
                <el-select size="small" filterable v-model="selectdata.selectStoreType" style="width:200px;" placeholder="请选择">
                  <el-option label="全部" value="0"></el-option>
                  <el-option v-for="item in options" :key="item.index" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label class="wxelForm" label-width="15px">
                <el-button type="primary" size="mini" @click="search">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label class="wxelForm" label-width="35px">
            <el-input style="width:350px" clearable v-model="selectdata.keyword" size="small" placeholder="请输入账单单号或会员手机号搜索">
              <el-button slot="append" @click="searchKeyword" icon="el-icon-search"></el-button>
            </el-input>

          </el-form-item>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="tableMain">
        <el-table ref="multipleTable" :data="tableData" stripe style="width: 100%">
          <el-table-column prop="orderCode" fixed label="单号" align="center" width="160">
            <template slot-scope="scope">
              <el-button size="small" @click="routerPush(scope.row.goodsType,scope.row.id,scope.row.orderType,scope.row.orderCode)" type="text" class="addDetail">{{scope.row.orderCode}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="结账时间" align="center" width="200"></el-table-column>
          <el-table-column prop="orderType" width="120" :formatter="orderType" label="类型" align="center"></el-table-column>
          <el-table-column prop="source" label="来源" :formatter="sourceList" align="center"></el-table-column>
          <el-table-column prop="posCode" label="收银机号" align="center" width="150"></el-table-column>
          <el-table-column prop="cashier" label="收银员" align="center"></el-table-column>
          <el-table-column prop="phone" label="会员手机号" align="center" width="150"></el-table-column>
          <el-table-column prop="salerName" label="会员顾问" align="center" width="150"></el-table-column>
          <el-table-column prop="amount" align="center" label="应收金额">
            <template slot-scope="scope">
              <span v-if="scope.row.orderType=='5'">{{scope.row.amount}}积分</span>
              <span v-else>{{scope.row.amount}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="presentDiscount" label="赠送金额" align="center"></el-table-column>
          <el-table-column prop="goodsDiscount" label="商品折扣" align="center"></el-table-column>
          <el-table-column prop="bargainingAmount" label="议价扣减" align="center"></el-table-column>
          <el-table-column prop="memberAmount" label="会员优惠" align="center"></el-table-column>
          <el-table-column prop="activityAmount" label="优惠活动" align="center"></el-table-column>
          <el-table-column prop="ticketAmount" label="券" align="center"></el-table-column>
          <el-table-column prop="mlPrice" label="抹零" align="center"></el-table-column>
          <el-table-column prop="payAmount" label="实收金额" align="center"></el-table-column>
          <el-table-column prop="cardPrice" label="计次卡" align="center"></el-table-column>
          <el-table-column prop="cashPayAmount" label="现金" align="center"></el-table-column>
          <el-table-column prop="bankPayAmount" label="银行卡" align="center"></el-table-column>
          <el-table-column prop="weChatPayAmount" label="微信" align="center"></el-table-column>
          <el-table-column prop="aliPayAmount" label="支付宝" align="center"></el-table-column>
          <el-table-column prop="memberPayAmount" label="会员余额" align="center"></el-table-column>
          <el-table-column prop="integralAmount" label="积分抵现" align="center"></el-table-column>
        </el-table>
        <!-- 页码 -->
        <div class="pageblock">
          <el-button size="small" type="primary" class="topage" @click="toPage">确定</el-button>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20,30]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalItems"></el-pagination>
        </div>
      </div>
    </div>
    <div class="pageLevel" v-else>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import util from "@/util";
import u from "@/util/state";
import { mapState } from "vuex";
import { shopOrderSaleReport, selectBaseShopPageList } from "@/api";
export default {
  computed: mapState([
    "merchantId",
    "sub",
    "power",
    "soUrce",
    "isShop",
    "businessScope"
  ]),
  data() {
    return {
      orderType: u.orderTypelist, //订单类型转换
      sourceList: u.sourceList, //来源
      //表格
      selectdata: {
        keyword: "",
        createTime: [],
        orderType: "0",
        source: "",
        selectStoreType: "0",
        payType: ""
      }, //搜索条件
      tableData: [], //列表数据
      // 分页开始
      pageSize: 20,
      totalItems: 0,
      currentPage: 1,
      options: [], //选择机构
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      }, //选择日期范围
      shopType: true //门店经营范围
    };
  },
  created() {
    this.data();
    this.getStoreList();

    if (this.businessScope != undefined) {
      let businessScopeValue = this.businessScope.split(",");
      if (businessScopeValue.length == "1") {
        if (businessScopeValue[0] == "0") {
          this.shopType = true;
        } else if (businessScopeValue[0] == "1") {
          this.shopType = false;
        } else {
          this.shopType = true;
        }
      } else if (businessScopeValue.length == "2") {
        if (businessScopeValue[0] == "0" && businessScopeValue[1] == "1") {
          this.shopType = true;
        } else if (
          businessScopeValue[0] == "0" &&
          businessScopeValue[1] == "2"
        ) {
          this.shopType = true;
        } else {
          this.shopType = true;
        }
      }
    }
  },
  mounted() {
    this.source = this.soUrce;
  },
  watch: {
    sub: {
      handler: function(val, oldVal) {
        if (oldVal != null && val == false) {
          this.data();
        }
      },
      deep: true
    }
  },
  methods: {
    // 权限配置
    setRole(key) {
      return util.selectTitle(this.power, key);
    },
    // 查看路由
    routerPush(type = "", id = "", orderType = "", orderCode = "") {
      if (orderType == "4") {
        util.routerTo("/data-center/store-salesOrders/store-returnDetail", {
          type: type,
          id: id,
          orderType: orderType,
          orderCode: orderCode
        });
      } else {
        util.routerTo("/data-center/store-salesOrders/store-orderDetail", {
          type: type,
          id: id,
          orderType: orderType,
          orderCode: orderCode
        });
      }
    },
    // 机构列表
    getStoreList() {
      selectBaseShopPageList({
        businessId: this.merchantId,
        type: "3"
      }).then(res => {
        let a = {
          name: "连锁公司",
          id: "1"
        };
        res.data.list.unshift(a);
        this.options = res.data.list;
      });
    },

    //------搜索
    search() {
      this.selectdata.keyword = "";
      this.currentPage=1;
      this.supplierlist(this.pageSize, this.currentPage);
    },
    searchKeyword() {
      this.selectdata.orderType = "0";
      this.selectdata.source = "";
      this.selectdata.selectStoreType = "0";
      this.selectdata.payType = "";
      this.currentPage=1;
      this.supplierlist(this.pageSize, this.currentPage);
    },
    //  默认日期
    data(picker) {
      // 获取一个月之前的日期
      // var monthDate = new Date();
      // var monthDates = monthDate.setMonth(monthDate.getMonth() - 1);
      // var monthDateB = util.foryear(monthDates);

      //  获取今天日期
      const nowDate = new Date();
      var nowDates = nowDate.setTime(nowDate.getTime());
      var nowDateB = util.foryear(nowDates);
      this.selectdata.createTime[0] = nowDateB;
      this.selectdata.createTime[1] = nowDateB;
      this.supplierlist(this.pageSize, 1);
    },
    // 获取表格数据
    supplierlist(pageSize, pageNum) {
      let Datas = {
        shopId: this.merchantId,
        pageSize: pageSize,
        pageNo: pageNum,
        startDate: this.selectdata.createTime[0], // 开始日期
        endDate: this.selectdata.createTime[1], // 结束日期
        name: this.selectdata.keyword, // 账单编号
        orderType: this.selectdata.orderType, //类型
        source: this.selectdata.source, // 来源
        orgType: this.selectdata.selectStoreType, // 选择机构
        payType: this.selectdata.payType //支付方式
      };
      shopOrderSaleReport(Datas).then(res => {
        this.totalItems = res.data.pageTotal;
        this.tableData = res.data.list;
      });
    },
    //跳页
    toPage() {
      this.currentPage=1;
      this.supplierlist(this.pageSize, this.currentPage);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage=1;
      this.supplierlist(this.pageSize,this.currentPage);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.supplierlist(this.pageSize, this.currentPage);
    }
  }
};
</script>
<style scoped>
.billdata /deep/ .el-date-editor .el-range__close-icon {
  display: none;
}
</style>


